<template>
    <div class="distribution-container">
        <div class="flex-box">
            <div style="width: 50%;">
                <el-form :model="form" label-width="100px" :rules="rules" ref="formRef">
                    <el-form-item label="商品图片：" prop="bannerList">
                        <imageUpload v-model:file-list="form.bannerList" :limit="5" :fileSize="3" packageName="banner">
                            <!-- <template #tip> 建议尺寸：800*800像素，300kb以下</template> -->
                        </imageUpload>
                    </el-form-item>
                    <!-- <el-form-item label="商品标题：">
                        <el-input v-model="form.title" placeholder="输入商品标题"></el-input>
                    </el-form-item> -->
                    <el-form-item label="商品描述：" prop="description">
                        <el-input v-model="form.description" :rows="4" type="textarea" placeholder="输入商品描述"></el-input>
                    </el-form-item>
                    <el-form-item label="商品视频：" prop="video">
                        <videoUpload :fileList="form.video" :limit="1" :fileSize="100" packageName="video"
                            @update:fileList="updateFileList">
                        </videoUpload>
                    </el-form-item>
                    <el-form-item label="商品简介：" prop="html">
                        <editorBox :ueditorData="form.html" @changeMsg="changeMsg"></editorBox>
                    </el-form-item>
                    <el-form-item label="">
                        <el-button type="primary" @click="previewFn">预览</el-button>
                        <el-button type="primary" @click="submit">修改</el-button>
                        <!-- <el-button @click="openDialog">查看分享记录</el-button> -->
                        <el-button type="primary" @click="getSystemData">系统设置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="flex-box preview-box" style="width: 50%;" v-if="previewType">
                <div class="overflow-box">
                    <div class="preview">
                        <div class="carousel">
                            <el-carousel height="390px" :indicator-position="false" arrow="nerver">
                                <el-carousel-item v-for="item in previewData.bannerList" :key="item">
                                    <img :src="item.url" style="width: 100%;" />
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                        <div class="preview-info">
                            <div class="preview-title">{{ previewData.description }}</div>
                            <div class="preview-video">
                                <video :src="previewData.video[0].url" packageName="video" controls></video>
                            </div>
                            <div class="preview-html" v-html="previewData.html"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <systemDialog :dialogVisible="systemVisible" :data="systemData" @close="closeSystem"></systemDialog>
        <shareDialog :dialogVisible="shareVisible" @close="closeShare"></shareDialog>
    </div>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'
import { NextLoading } from '/@/utils/loading';
import { getProduct, setProduct, getSystem } from '/@/api/api'
import editorBox from './components/Editor/editorBox.vue';
import videoUpload from './components/upload/video.vue'
import imageUpload from './components/upload/image.vue'
import systemDialog from './dialog/systemDialog.vue';
import shareDialog from './dialog/shareDialog.vue';
import { ElMessage } from 'element-plus';
const tableLoading = ref(true);
const isAdd = ref(false);
const shareVisible = ref(false);
const form = ref({})
const formRef = ref()
const previewType = ref(false)
const systemVisible = ref(false);
const systemData = ref({})
const previewData = ref({})
const rules = reactive({
    bannerList: [
        { required: true, message: '请上传商品图片', trigger: 'blur' },
    ],
    description: [
        { required: true, message: '请输入商品描述', trigger: 'blur' },
    ],
    video: [
        { required: true, message: '请上传商品视频', trigger: 'blur' },
    ],
    html: [
        { required: true, message: '请输入商品简介', trigger: 'blur' },
    ],
})
async function getData() {
    tableLoading.value = true;

    let { code, data } = await getProduct();
    if (code == 200) {
        tableLoading.value = false;
        form.value = data;
        let imageArr = [];
        data.bannerList.forEach(item => {
            imageArr.push({ url: item })
        });
        form.value.bannerList = imageArr;
        form.value.video = [{ url: data.video }];
    }
}
function submit() {
    formRef.value.validate((valid, fields) => {
        if (valid) {
            const bannerList = form.value.bannerList.map(item => item.url);
            const video = form.value.video ? form.value.video[0].url : null
            const params = {
                ...form.value,
                bannerList,
                video
            }
            setProduct(params).then((res: any) => {
                if (res.code == 200) {
                    ElMessage({
                        message: '修改成功！',
                        type: 'success',
                    });
                }
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}
function openDialog() {
    shareVisible.value = true;
}
function previewFn() {
    formRef.value.validate((valid, fields) => {
        if (valid) {
            previewType.value = true;
            previewData.value = { ...form.value };
        } else {
            console.log('error submit!', fields)
        }
    })
}
async function getSystemData() {
    let { code, data } = await getSystem();
    if (code == 200) {
        systemData.value = data;
        systemVisible.value = true;
    }
}
function closeSystem() {
    systemVisible.value = false;
}
function changeMsg(value) {
    form.value.html = value;
}
function closeShare() {
    shareVisible.value = false;
}
function updateFileList(data) {
    form.value.video = data;
}
// 页面加载时
onMounted(() => {
    NextLoading.done();
    getData();
});
</script>
<style lang='scss' scoped>
.distribution-container {
    padding: 20px;
}

.flex-box {
    display: flex;
}

.preview-box {
    justify-content: center;
    height: 100%;
    background: url('/@/assets/images/iphone-bg.jpg');
    background-size: 436px 800px;
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 20px;

    .overflow-box {
        width: 375px;
        background: #fff;
        border-radius: 25px;
        overflow-y: auto;
        height: 750px;
        box-sizing: border-box;
        margin-top: 20px;
        margin-bottom: 40px;
    }

    .overflow-box::-webkit-scrollbar {
        height: 0;
        width: 0;
    }

    .carousel {
        width: 375px;
        height: 390px;
    }

    .preview-info {
        width: 375px;
        padding: 20px;

        .preview-title {
            padding: 10px;
            box-sizing: border-box;
            font-size: 16px;
            font-weight: 600;
        }

        .preview-video {
            width: 100%;
            margin: 20px 0;

            video {
                width: 100%;
                border-radius: 10px;
            }
        }

        .preview-html {
            word-break: break-all;
        }
    }
}
</style>